<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
  <style>
    #btnSub
    {
      width: 100%;
    }
    #fileBox{
      margin:/*1*/rem 0;
    }
    #fileBox label{
      border: 1px solid #ccc;
      display:block;
      float:left;
      height:60px;
      width:60px;
      background:url(./img/xiang1_06.png) no-repeat center;
      background-size: 4rem;
      background-color: #ccc;
      margin-left: .17rem;

    }
    #fileBox .file-btn{
      height:50px;
      width:50px;
      margin:0 .5rem .5rem 0;opacity:0;
    }
    #fileBox .review-box{
      display:block;
      float:left;
      margin-left: .17rem;
    }
    #fileBox .review-box img{
      height:60px;
      width:60px;
      margin:0 .1rem .2rem 0;
    }
    #fileBox .prev-item{
      position:relative;display:inline-block;
    }
    #fileBox .prev-item .closebtn{
      position:absolute;
      right: -1px;
      top: -4px;
      display: block;
      height: 14px;
      width: 14px;
      color: #fff;
      font-size: 16px;
      line-height:14px;
      text-align: center;
      background: #ff0000;
      border-radius: 10px;
    }
    #fileBox .prev-item .closebtn {
      position: absolute;
      right: 7px;
      top: -4px;
      display: block;
      height: 14px;
      width: 14px;
      color: #fff;
      font-size: 16px;
      line-height: 14px;
      text-align: center;
      background: #8E8E93;
      border-radius: 10px;
    }

  </style>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">    </script>

</head>
<body class="d-flex flex-column h-100">

<% if (locals.success) { %>
  <div id="alt_sucess" class="alert alert-success">
    <%- success %>
  </div>
<% } %>

<% if (locals.error) { %>
  <div id="alt_warning" class="alert alert-warning">
    <%= error %>
  </div>
<% } %>
<form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
<div class="file-box clearboth" id="fileBox">
  <label class="clone-dom" style="display:none;">
    <input type="file" class="file-btn" name="fulAvatar"/>
  </label>
  <div class="review-box"></div>
  <label><input type="file" class="file-btn clone-dom" name="fulAvatar"/>
  </label>
</div>
  <button id="btnSub" class="btn btn-lg btn-primary navbar-fixed-bottom"   type="submit">上 传</button>
</form>
<script type="text/javascript">
  //获取文件url
  function createObjectURL(blob){
    if (window.URL){
      return window.URL.createObjectURL(blob);
    } else if (window.webkitURL){
      return window.webkitURL.createObjectURL(blob);
    } else {
      return null;
    }
  }

  var box = $("#fileBox .review-box");    //显示图片box
  var file = $("#file"); //file对象
  var domFragment =  document.createDocumentFragment();   //文档流优化多次改动dom

  $("#fileBox").on("click", ".file-btn",function(){
    var index = $(this).parent().index();
    if(index == 11){
      alert("最多可以上传9张图片！");
      return false;
    }
  });
  //触发选中文件事件
  $("#fileBox").on("change", ".file-btn", function(event){
    var imgNum = parseInt($("#fileBox .review-box img").length);
    if(imgNum < 4){
      var file = event.target.files;  //获取选中的文件对象
      var imgTag = $("<img src=''/>");
      var fileName = file[0].name;    //获取当前文件的文件名
      var url = createObjectURL(file[0]); //获取当前文件对象的URL
      //忽略大小写
      var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);
      var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);
      var jpeg0 = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);
      var jpeg1 = (fileName.indexOf(".gif") > -1) || (fileName.toLowerCase().indexOf(".gif") > -1);
      var jpeg = (fileName.indexOf(".bmp") > -1) || (fileName.toLowerCase().indexOf(".bmp") > -1);
      //判断文件是否是图片类型
      if(jpg || png || jpeg || jpeg0 || jpeg1 || gif || bmp){
        imgTag.attr("src",url);
      }else{
        alert("请选择合适的图片类型文件！");
      }

      //最佳显示
      var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>");
      imgbox.append(imgTag);
      box.append(imgbox);
      event.target.parentNode.style.display = "none";
      var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style");
      $("#fileBox").append(cloneDom);
    }
  });

  $(".review-box").on("click", ".prev-item", function(){
    var index = $(this).index();
    $(this).remove();
    $("#fileBox label:eq(" + (index + 1) + ")").remove();
  });
</script>

</body>
</html>